<template>
    <div class="app-container impEdit">
        <h4>维修员信息</h4>
        <table border="1" rules="all" class="tablestyle" width="100%">
            <tr>
                <td class="label">名称</td>
                <td>
                    <el-select v-model="form.userId" clearable size="small" placeholder="请选择名称">
                        <el-option
                            v-for="item in userList"
                            :key="item.userId"
                            :label="item.userName"
                            :value="item.userId"></el-option>
                    </el-select>
                </td>
                <!-- <td class="label">出生日期</td>
                <td>
                    <el-date-picker
                        v-model="form.data"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </td> -->
            </tr>
            <tr>
                <td class="label">资质</td>
                <td colspan="3">
                     <el-select v-model="form.deviceAptitudeList" multiple placeholder="请选择资质" value-key="id">
                        <el-option
                        v-for="dict in qualificaeList"
                        :key="dict.id"
                        :label="dict.name"
                        :value="dict">
                        </el-option>
                    </el-select>
                </td>
            </tr>
            <tr>
                <td class="label">职责</td>
                <td colspan="3">
                     <el-select v-model="form.deviceResponsibilityList" multiple placeholder="请选择职责" value-key="id">
                        <el-option
                        v-for="dict in dutyList"
                        :key="dict.id"
                        :label="dict.name"
                        :value="dict">
                        </el-option>
                    </el-select>
                </td>
            </tr>
            <tr>
                <td class="label">备注</td>
                <td colspan="3">
                    <el-input
                        type="textarea"
                        autosize
                        :autosize="{ minRows: 2, maxRows: 2}"
                        placeholder="请输入内容"
                        v-model="form.remark">
                    </el-input>
                </td>
            </tr>
        </table>
        <h4>档案</h4>
        <el-upload
            :action="baseUrl()+'/common/upload'"
            :on-success="fileSuccess"
            :show-file-list="false"
            >
            <el-button size="mini" type="warning" icon="el-icon-folder-add">上传</el-button>

        </el-upload>
        <div class="unloadBox">
            <div class="file" v-for="(item,index) in form.annexList">
                <span class="index">{{index+1}}、</span>
                <span class="blue">{{item.fileName}}</span>
                <!--            <i class="blue el-icon-bottom" @click="fileDown(index,item.filePath)" ></i>-->
                <i class="blue el-icon-delete" @click="fileDel(index,item.filePath)"></i>
            </div>
        </div>
        <div style="width:100%;text-align:center;padding:20px">
            <el-button size="mini" type="success" @click="submit">提交</el-button>
        </div>
    </div>
</template>

<script>
import {getUser,implementAdd,implementEdit,implementDes,qualifications,duty} from '@/api/personnelMent/index'
import {  fileDelete, fileDownload, fileDeleteLibrary } from '@/api/basicInformation/index'
export default {
    data(){
        return{
            form:{
                annexList:[],
                deviceAptitudeList:[],
                deviceResponsibilityList:[]
            },
            userList:[],
            qualificaeList:[],
            dutyList:[],
        }
    },
    created(){
        this.getUserList()
        this.getQualifications()
        this.getDuty()
        if(this.$route.query.id){
            this.getData()
        }
    },
    methods:{
        getUserList(){
           getUser().then((res)=>{
                if(res.code==200){
                    this.userList=res.data
                }
               
           }) 
        },
        getQualifications(){
            qualifications().then(res => {
                if(res.code==200){
                    res.data.forEach((i,index) => {
                        this.qualificaeList[index]={name:i.dictLabel,id:i.dictValue}
                    });
                }
            })
        },
        getDuty(){
            duty().then(res => {
                if(res.code==200){
                    res.data.forEach((i,index) => {
                        this.dutyList[index]={name:i.dictLabel,id:i.dictValue}
                    });
                }
            });
        },
        getData(){
            implementDes(this.$route.query.id).then((res)=>{
                if(res.code==200){
                   this.form=res.data
                }
               
           }) 
        },
        fileSuccess(res) {
            //文件上传成功
            this.form.annexList.push({ fileName: res.fileName, filePath: res.filePath})
        },
        async fileDel(index, filePath) {
            for (let i = 0; i < this.form.annexList.length; i++) {
                if (index == i) {
                    if (this.form.annexList[i].id) {
                        await fileDeleteLibrary(this.form.annexList[i].id)
                    } else {
                        await fileDelete(filePath)
                    }
                    this.form.annexList.splice(i, 1)
                }
            }
        },
        submit(){
            if(!this.form.userId){
                this.$message.warning('请选择名称')
                return false
            }
            if(!this.form.deviceAptitudeList||this.form.deviceAptitudeList.length<=0){
                this.$message.warning('请选择资质')
                return false
            }
            if(!this.form.deviceResponsibilityList||this.form.deviceResponsibilityList.length<=0){
                this.$message.warning('请选择职责')
                return false
            }
            if(this.$route.query.id){
                //修改
                implementEdit(this.form).then((res)=>{
                    if(res.code==200){
                        this.$message.success(res.msg)
                        this.$router.push({path:'/personnelMent/implementation'})
                    }
                })
            }else{
                //添加
                implementAdd(this.form).then((res)=>{
                    if(res.code==200){
                        this.$message.success(res.msg)
                        this.$router.push({path:'/personnelMent/implementation'})
                    }
                })
            }
            
        }
    }
}
</script>

<style lang="scss" scoped>
.impEdit>>>.el-textarea__inner,.impEdit>>>.el-input__inner{
        border:none;
}
.impEdit>>>.el-select,.impEdit>>>.el-textarea{
    width: 100%;
}
.impEdit{
    width: 900px;
    h4 {
      color: #05A380;
    }
    .tablestyle {
        // margin-left: 15px;
        border: 1px solid #cccccc;
        color: #606266;
        font-size: inherit;
        .label{
            width: 164px;
            text-align: center;
        }
    }
    
    .unloadBox {
        border: 1px solid #cccccc;
        margin-top: 20px;
        min-height: 50px;
        overflow: hidden;
        // margin-left: 15px;
        .file {
          width: 100%;
          border-top: 1px #cccccc dotted;
          line-height: 50px;

          .index {
            padding: 0 10px;
            color: #666
          }

          i {
            float: right;
            line-height: 50px;
            padding-right: 10px;
            font-size: 20px;
            cursor: pointer;
          }

        }
    }
}
</style>